<template>
  <div>
    <swiper :imgList="imgList"></swiper>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category" class="title">
          <img src="../assets/images/menu1.jpg" />
          <div class="mui-media-body">福利活动</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category" class="title">
          <img src="../assets/images/menu2.jpg" />
          <div class="mui-media-body">积分专区</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category" class="title">
          <img src="../assets/images/menu3.jpg" />
          <div class="mui-media-body">签到抽奖</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/category">
			<img src="../assets/images/menu4.jpg" />
			<div class="mui-media-body">积分抵现</div>
		</router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		<router-link to="/category">
			<img src="../assets/images/menu5.jpg" />
			<div class="mui-media-body">热门话题</div>
		</router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		<router-link to="/category">
			<img src="../assets/images/menu6.jpg" />
			<div class="mui-media-body">更多专题</div>
		</router-link>
      </li>
    </ul>
		
		<div class="goods-list">
		  <div class="goods-item" v-for="item in goodslist" :key="item.id">
		    <a :to="{name: 'goods_info', params: {id: item.id}}">
		      <img :src="item.image" />
		      <h1 class="title">{{ item.name }}</h1>
		      <p class="info">
		        <span class="price">¥{{ item.price }}</span>
		        <span class="sell">剩余 {{ item.num }} 件</span>
		      </p>
		    </a>
		  </div>
		  <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
		</div>
  </div>
</template>

<script>
import swiper from '../components/swiper.vue'
export default {
  data () {
    return {
      imgList: [],
			
			goodslist: [],
			last_id: 0
    }
  },
  created () {
    this.getImgList();
		
		this.getGoodsList();
  },
  methods: {
    getImgList () {
      this.$indicator.open({
        text: '加载中'
      })
      this.$http.get('imglist').then(res => {
        this.$indicator.close()
        if (res.data.code === 0) {
          this.$toast('加载轮播图失败')
        } else {
          this.imgList = res.data.data
        }
      })
    },
		
		getGoodsList () {
		  this.$indicator.open({
		    text: '加载中'
		  })
		  let params = { last_id: this.last_id, category_id: this.category_id }
		  this.$http.get('goodslist', { params: params }).then(res => {
		    this.$indicator.close()
		    if (res.data.code === 1) {
		      if (res.data.data.length > 0) {
		        this.goodslist = this.goodslist.concat(res.data.data)
		        this.last_id = res.data.data[res.data.data.length - 1].id
		      } else if (this.goodslist.length > 0) {
		        this.$toast('已经到达底部')
		      } else {
		        this.$toast('列表为空')
		      }
		    }
		  })
		},
		getMore () {
		  this.getGoodsList()
		}
  },
  components: {
    swiper
  }
}
</script>

<style lang="scss" scoped>
.mui-grid-view.mui-grid-9 {
  background-color: #fff;
  border: none;
  img {
    width: 60px;
    height: 60px;
  }
}
.mui-table-view-cell > a.title {
  display: inline;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}
.mui-media-body {
  // border: 1px solid red;
  font-size: 14px;
  // margin-left: 20px;
	padding-left:15px
}


.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  .goods-item {
    width: calc(calc(100% / 2) - 10px);
    margin: 10px 10px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px;
    img {
      width: 100%;
    }
    .title {
      font-size: 14px;
      color: #333;
      margin: 10px 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
    }
    .info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      .price {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
      .sell {
        font-size: 13px;
      }
    }
  }
  .more {
    margin: 15px 0;
    font-size: 14px;
  }
}

</style>
